import { Form, Input, Button, Table, Space, Select, Modal, DatePicker, Image, Popconfirm, Pagination } from 'antd'
import { useEffect, useState } from 'react'
import { LikeOutlined } from '@ant-design/icons';
import './contentComment.scss'
import ArticleDetail from '../Article_publishing_management/ArticleDetail/ArticleDetail';
import http from '../../utils/http'
import store from '../../store';
const { Option } = Select;
const Content_comment_management = () => {
  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isArticleDetail, setDetail] = useState(false)
  const [data,setData]=useState([])
  const [value1, setValue1] = useState()
  const [selectedRowKeys, setSelectedRowKeys] = useState([])


  function detailData(){
    http({
      url:'/comments/findComments',
      params:{
        artTitle: form.getFieldsValue().username ? form.getFieldsValue().username : '',
        artType: form.getFieldsValue().type ? form.getFieldsValue().type : '',
      }
    }).then((res)=>{
      console.log('渲染内容评论管理表格',res);
      store.lijuhua.total = res.data.countRows;
      if(res.code==200){
        let arr=res.data.listArticle.map((v,i)=>{
          return {
            key: v.artId,
            title: v.artTitle,
            avenues: v.artChannel,
            channel: v.artDitch,
            type: v.artType,
            keyword: v.artKeyWord,
            comments: v.num,
            recenttime: v.artSendTime
          }
        })
        setData(arr)
      }
    })
  }
  // 一上来就渲染内容评论管理的表格数据
  useEffect(()=>{
    detailData()
  },[])

  // 搜索
  const search = () => {
    detailData()
  }

  // 重置
  const resize = () => {
    setSelectedRowKeys([]);
    store.lijuhua.current=1
    form.setFieldsValue({
      username: '',
      type: ''
    })
    detailData()
  }

  // 查看文章详情
  const openEditBox = (text,record) => {
    setDetail(true)
    // console.log(text,record);
    setValue1(record.key)
  }

  // 取消删除
  function cancel(e) {
    console.log('取消删除');
  }
  // 确定删除
  function confirm(a, b) {
    // http({
    //     url:'/admin/deladmin',
    //     method:'post',
    //     data:{
    //         id:b.id
    //     }
    // }).then((res)=>{
    //     console.log(res);
    // })
  }

  // 页码
  const pageChange = (page, size) => {
    store.lijuhua.current = page
    http({
      url: '/article/findArticle',
      params: {
        current: page,
      }
    }).then((res) => {
      console.log('渲染文章发布管理表格', res);
      if (res.code == 200) {
        console.log(res.data.listArticle);
        let arr = res.data.listArticle.map((v, i) => {
          return {
            key: v.artId,
            title: v.artTitle,
            avenues: v.artChannel,
            channel: v.artDitch,
            type: v.artType,
            keyword: v.artKeyWord,
            publisher: v.adminId,
            sendtime: v.artSendTime
          }
        })
        setData(arr)
      }
    })
  }

  // 表头
  const columns = [
    {
      title: '文章标题',
      dataIndex: 'title',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '发布渠道',
      dataIndex: 'avenues',
    },
    {
      title: '发布频道',
      dataIndex: 'channel',
    },
    {
      title: '文章类型',
      dataIndex: 'type',
    },
    {
      title: '关键词',
      dataIndex: 'keyword',
    },
    {
      title: '评论数',
      dataIndex: 'comments',
    },
    {
      title: '最近评论时间',
      dataIndex: 'recenttime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => { openEditBox(text, record) }}>查看文章</a>
          {/* <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => { confirm(text, record) }}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          > */}
          <a href="#" onClick={showModal}>查看评论</a>
          {/* </Popconfirm> */}
        </Space>
      ),
    },
  ];

  // 前端表格假数据
  // const data = [
  //   {
  //     key: '1',
  //     title: '对于年龄，你焦虑了吗？',
  //     avenues: '小程序',
  //     channel: '今日热点',
  //     type: '图文',
  //     keyword: '年龄',
  //     comments: 5,
  //     recenttime: '2022-1-23'
  //   },
  //   {
  //     key: '2',
  //     title: '对于年龄，你焦虑了吗？',
  //     avenues: '小程序',
  //     channel: '今日热点',
  //     type: '图文',
  //     keyword: '年龄',
  //     comments: 5,
  //     recenttime: '2022-1-23'
  //   },
  //   {
  //     key: '3',
  //     title: '对于年龄，你焦虑了吗？',
  //     avenues: '小程序',
  //     channel: '今日热点',
  //     type: '图文',
  //     keyword: '年龄',
  //     comments: 5,
  //     recenttime: '2022-1-23'
  //   },
  //   {
  //     key: '4',
  //     title: '对于年龄，你焦虑了吗？',
  //     avenues: '小程序',
  //     channel: '今日热点',
  //     type: '图文',
  //     keyword: '年龄',
  //     comments: 5,
  //     recenttime: '2022-1-23'
  //   },
  // ]; // rowSelection object indicates the need for row selection

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      // disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      title: record.title,
    }),
  };

  const showModal = () => {
    console.log(111111111);
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  if (isArticleDetail) {
    return <div>
      <ArticleDetail value1={value1} setDetail={setDetail} />
    </div>
  } else {
    return <div className='roleContent'>
      <Form form={form} name="horizontal_login" layout="inline" className='title'>
      <Form.Item
          name="username">
          <div className='kuai'>
            <span></span>
            <span>内容评论管理</span>
          </div>
        </Form.Item>
        <Form.Item className='btn'>
          <div>
            <Popconfirm title='确定要将它们全部删除吗？'
              onConfirm={() => { confirm() }}
              onCancel={cancel} okText='YES' cancelText='NO'>
              <a href='#'> <Button className='resize' type="primary">批量删除</Button></a>
            </Popconfirm>
          </div>
        </Form.Item>
        
      </Form>
      <div className='biao'>
        <Form form={form} name="horizontal_login" layout="inline" className='Role'>
          <Form.Item
            name="username"
            label='文章标题'
          ><Input placeholder='请输入文章标题' />
          </Form.Item>
          <Form.Item
            name="type"
            label='文章类型'
          >
            <Select placeholder='请选择' className='select'>
              <Option value="图文">图文</Option>
              <Option value="视频">视频</Option>
            </Select>
          </Form.Item>
          <Form.Item className='btn'>
            <div>
              <Button className='cha'
                type="primary"
                onClick={search}>查询</Button>
              <Button className='resize' onClick={resize} type="primary">重置</Button>
            </div>

          </Form.Item>
        </Form>
        <Table className='table1' pagination={false}
          rowSelection={{
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
        />
         <Pagination className='page' defaultCurrent={1} current={store.lijuhua.current} total={store.lijuhua.total} onChange={pageChange} />
      </div>
      {/* 文章评论的弹框 */}
      <Modal title="文章评论" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width='550px'>
        评论时间： <DatePicker style={{ width: '50%' }} />
        <p style={{ color: 'gray', fontSize: '12px', marginTop: '10px' }}>共158条评论</p>
        {/* 评论1 */}
        <div style={{ display: 'flex' }}>
          {/* 头像 */}
          <div style={{ width: '25px', height: '25px' }}>
            <Image src='http://m.imeitou.com/uploads/allimg/220505/5-220505163T1.jpg'
              style={{ borderRadius: '50%' }}></Image>
          </div>

          {/* 内容 */}
          <div>
            <span style={{ color: 'grey', marginLeft: '10px' }}>小圆</span>
            <span style={{ color: 'grey', marginLeft: '10px' }}>一周前</span>
            <div style={{ width: '420px', marginLeft: '10px' }}>
              这个评论插件叫AntSay,简单三步即可在自己的网站里嵌入，超轻。
              1.获取APP ID
              <br />
              2.一行代码引入组件
              <br />
              3.配置几个参数
              <br />
              赶紧使用吧，地址：http://say.alipay.net/
            </div>
            <div style={{ height: '20px' }}></div>
          </div>
          <LikeOutlined style={{ marginTop: '5px' }} />  <span style={{ marginLeft: '5px' }}>2</span>

        </div>
        {/* 评论2 */}
        <div style={{ display: 'flex' }}>
          {/* 头像 */}
          <div style={{ width: '25px', height: '25px' }}>
            <Image src='http://m.imeitou.com/uploads/allimg/220505/5-220505163U2.jpg'
              style={{ borderRadius: '50%' }}></Image>
          </div>
          {/* 内容 */}
          <div>
            <span style={{ color: 'grey', marginLeft: '10px' }}>小刘</span>
            <span style={{ color: 'grey', marginLeft: '10px' }}>一周前</span>
            <div style={{ width: '420px', marginLeft: '10px' }}>
              开启评论不要脸模式!这个APP写得非常棒!五分钟就配置好了!赞
              {/* 回复内容1 */}
              <div style={{ display: 'flex', marginTop: '10px' }}>
                {/* 回复人的头像 */}
                <div style={{ width: '25px', height: '25px' }}>
                  <Image src='http://m.imeitou.com/uploads/allimg/220505/5-220505163U7.jpg'
                    style={{ borderRadius: '50%' }}
                  ></Image>
                </div>
                {/* 回复内容 */}
                <div>
                  <span style={{ color: 'grey', marginLeft: '10px' }}>小猴</span>
                  <span style={{ color: 'grey', margin: '0,10px' }}>回复</span>
                  <span style={{ color: 'grey', marginRight: '10px' }}>小刘</span>
                  <span style={{ color: 'grey', marginLeft: '10px' }}>一周前</span>
                  <p style={{ marginLeft: '10px' }}>不仅支持PC还支持mobile,真贴心 <span style={{ color: 'blue', marginLeft: '5px' }}>@小圆</span></p>
                </div>
              </div>
              {/* 回复内容2 */}
              <div style={{ display: 'flex', marginTop: '10px' }}>
                {/* 回复人的头像 */}
                <div style={{ width: '25px', height: '25px' }}>
                  <Image src='http://m.imeitou.com/uploads/allimg/220505/5-220505163U2.jpg'
                    style={{ borderRadius: '50%' }}
                  ></Image>
                </div>
                {/* 回复内容 */}
                <div>
                  <span style={{ color: 'grey', marginLeft: '10px' }}>小刘</span>
                  <span style={{ color: 'grey', margin: '0,10px' }}>回复</span>
                  <span style={{ color: 'grey', marginRight: '10px' }}>小猴</span>
                  <span style={{ color: 'grey', marginLeft: '10px' }}>3分钟前</span>
                  <p style={{ marginLeft: '10px' }}>托儿得太明显 </p>
                </div>
              </div>

            </div>
            <div style={{ height: '20px' }}></div>
          </div>
          <LikeOutlined style={{ marginTop: '5px' }} />

        </div>
        {/* 评论3 */}
        <div style={{ display: 'flex' }}>
          {/* 头像 */}
          <div style={{ width: '25px', height: '25px' }}>
            <Image src='http://m.imeitou.com/uploads/allimg/220505/5-220505163U7.jpg'
              style={{ borderRadius: '50%' }}
            ></Image>
          </div>
          {/* 内容 */}
          <div>
            <span style={{ color: 'grey', marginLeft: '10px' }}>小猴</span>
            <span style={{ color: 'grey', marginLeft: '10px' }}>一周前</span>
            <div style={{ width: '420px', marginLeft: '10px' }}>
              不仅支持PC还支持mobile,真贴心 <span style={{ color: 'blue', marginLeft: '5px' }}>@小圆</span>

            </div>
            <div style={{ height: '20px' }}></div>
          </div>
          <LikeOutlined style={{ marginTop: '5px' }} />

        </div>
        <p style={{ color: 'gray', textAlign: 'center', marginTop: '20px' }}>查看更多评论</p>

      </Modal>
    </div>
  }




};
export default Content_comment_management;